<template>
  <div class="chooser-wrap">
    <ul class="chooser-items">
      <li ref="items" class="chooser-item"
      :class="{active: item.active}"
      @click="toggleSelect(index)"
      v-for="(item, index) in chooseItems">
        {{item.text}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        chooseItems: this.copyItems()
      };
    },
    props: {
      items: {
        type: Array,
        default: function () {
          return [];
        }
      },
      activeIndex: {
        type: Number,
        default: 0
      },
      multi: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      toggleSelect (index) {
        let item = this.chooseItems[index];
        if (item.active === undefined) {
          this.$set(item, 'active', !item.active);
        } else {
          item.active = !item.active;
        }
        this.$emit('on-change', this.getSelectItems());
      },
      copyItems: function () {
        let chooseItems = [];
        let items = this.items;
        let len = items.length;
        for (let i = 0; i < len; i++) {
          let item = items[i];
          let obj = {};
          if (Object.prototype.toString.apply(item) === '[object Object]') {
            for (let key in item) {
              if (item.hasOwnProperty(key)) {
                obj[key] = item[key];
              }
            }
          }
          chooseItems.push(obj);
        }
        return chooseItems;
      },
      getSelectItems: function () {
        return this.chooseItems.filter(function (item, index, arr) {
          return item.active;
        });
      }
    },
    beforeCreate: function () {
    },
    created: function () {
    },
    mounted: function () {
    }
  };
</script>
<style>
  .chooser-wrap{
    display: inline-block;
    text-align: center;
  }

  .chooser-wrap>
  .chooser-items{
    font-size: 0;
  }

  .chooser-wrap>
  .chooser-items>
  li{
    display: inline-block;
    padding: 0 10px;
    margin-right: 5px;
    border: 1px solid rgba(227, 227, 227, 1);
    border-radius: 3px;
    line-height: 27px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
  }

  .chooser-wrap>
  .chooser-items>
  .active{
    color: white;
    background-color: rgba(79, 192, 141, 1);
  }
</style>
